<script setup>
import {useKnowledgeStore} from "@/stores/KnowledgeStore.js";
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";

const knowledgeStore = useKnowledgeStore()

// 控制addDialog框
const addDialog = ref(false)
// 控制detailDialog框
const detailDialog = ref(false)
// 控制editDialog框
const editDialog = ref(false)

const formLabelWidth = '140px'


// 添加knowledge对象
const addKnowledge = ref({
  knowledge_name: "",
  knowledge_text: null
})

// 详情knowledge对象
const detailForm = ref({})

const handleDetail = async (index) => {
  const data = {knowledge_id: null}
  data.knowledge_id = knowledgeStore.knowledgeList[index].knowledge_id
  detailForm.value = await knowledgeStore.detailKnowledge(data)
  detailDialog.value = true
}

const handleEdit = async (index) => {
  const data = {knowledge_id: null}
  data.knowledge_id = knowledgeStore.knowledgeList[index].knowledge_id
  detailForm.value = await knowledgeStore.detailKnowledge(data)
  editDialog.value = true
}

const handleDelete = async (index) => {
  const data_ = {knowledge_id: null}
  data_.knowledge_id = knowledgeStore.knowledgeList[index].knowledge_id
  const data = await knowledgeStore.delKnowledge(data_)
  if (data.data === 1) {
    ElMessage({
      message: data.description,
      type: "success"
    })
  } else {
    ElMessage({
      message: data.description,
      type: "error"
    })
  }

  await knowledgeStore.listKnowledge()
}

const handleFileChange = (file) => {
  addKnowledge.value.knowledge_text = file.raw
}


// 确认新建knowledge
const confirmAddKnowledge = async () => {
  const formData = new FormData()
  formData.append('knowledge_name', addKnowledge.value.knowledge_name)
  formData.append('file', addKnowledge.value.knowledge_text)

  const data = await knowledgeStore.addKnowledge(formData)
  if (typeof data.data === 'number' && !isNaN(data.data)) {
    ElMessage({
      message: data.description,
      type: "success"
    })
  } else {
    ElMessage({
      message: data.description,
      type: "error"
    })
  }

  await knowledgeStore.listKnowledge()
  addDialog.value = false
}

const confirmModifyKnowledge = async () => {
  const modifyData = {
    knowledge_id: detailForm.value.data.knowledge_id,
    knowledge_name: detailForm.value.data.knowledge_name
  }

  const data = await knowledgeStore.modifyKnowledge(modifyData)
  if (data.data === 1) {
    ElMessage({
      message: data.description,
      type: "success"
    })
  } else {
    ElMessage({
      message: data.description,
      type: "error"
    })
  }
  await knowledgeStore.listKnowledge()
  editDialog.value = false
}

onMounted(() => knowledgeStore.listKnowledge())

</script>

<template>
  <div id="add">
    <el-button type="primary" id="button-add" @click="addDialog = true">新建</el-button>
  </div>

  <el-table :data="knowledgeStore.knowledgeList" style="width: 100%">
    <el-table-column label="创建时间" width="180" fixed>
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.create_at }}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="知识库名称" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.knowledge_name }}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="知识库训练状态" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.vector_knowledge_status === 1 ? "已训练" : "正在训练" }}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="知识条例" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.content_items }}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column fixed="right">
      <template #default="scope">
        <el-button
            size="small"
            type="success"
            @click="handleDetail(scope.$index, scope.row)"
        >
          详情
        </el-button>

        <el-button
            size="small"
            type="warning"
            @click="handleEdit(scope.$index, scope.row)"
        >
          编辑
        </el-button>

        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <!--新增框-->
  <el-dialog v-model="addDialog" title="新增knowledge" width="500" :close-on-click-modal=false>
    <el-form :model="addKnowledge">
      <el-form-item label="知识库名称" :label-width="formLabelWidth">
        <el-input v-model="addKnowledge.knowledge_name" autocomplete="off"/>
      </el-form-item>

      <el-form-item label="知识库文本文件">
        <el-upload
            ref="upload"
            class="upload-demo"
            :action="null"
            :auto-upload="false"
            :on-change="handleFileChange"
        >
          <el-button type="primary">选择文本知识库</el-button>
          <template #tip>
            <div class="el-upload__tip">只能够上传一个excel文本文件，且文件后缀名为.xlsx</div>
          </template>
          <!--<div slot="tip" class="el-upload__tip">只能够上传一个excel文本文件，且文件后缀名为.xlsx</div>-->
        </el-upload>
      </el-form-item>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addDialog = false">Cancel</el-button>
        <el-button type="primary" @click="confirmAddKnowledge">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!--  详情框-->
  <el-dialog v-model="detailDialog" title="详情" width="500" :close-on-click-modal=false>
    <el-form :model="detailForm" disabled>
      <el-form-item label="知识库名称" :label-width="formLabelWidth">
        <el-input v-model="detailForm.data.knowledge_name" autocomplete="off"/>
      </el-form-item>

      <el-form-item label="知识库条数" :label-width="formLabelWidth">
        <el-input v-model="detailForm.data.content_items" autocomplete="off"/>
      </el-form-item>

      <el-form-item label="知识库训练状态" :label-width="formLabelWidth">
        <el-input :value="detailForm.data.vector_knowledge_status===1?'已训练':'正在训练'" autocomplete="off"/>
      </el-form-item>

      <el-form-item label="知识库创建时间" :label-width="formLabelWidth">
        <el-input v-model="detailForm.data.create_at" autocomplete="off"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="detailDialog = false">Cancel</el-button>
        <el-button type="primary" @click="detailDialog = false">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 编辑框 -->
  <el-dialog v-model="editDialog" title="详情" width="500" :close-on-click-modal=false>
    <el-form :model="detailForm">
      <el-form-item label="知识库名称" :label-width="formLabelWidth">
        <el-input v-model="detailForm.data.knowledge_name" autocomplete="off"/>
      </el-form-item>

      <el-form-item label="知识库条数" :label-width="formLabelWidth">
        <el-input v-model="detailForm.data.content_items" autocomplete="off" disabled/>
      </el-form-item>

      <el-form-item label="知识库训练状态" :label-width="formLabelWidth">
        <el-input :value="detailForm.data.vector_knowledge_status===1?'已训练':'正在训练'" autocomplete="off" disabled/>
      </el-form-item>

      <el-form-item label="知识库创建时间" :label-width="formLabelWidth">
        <el-input v-model="detailForm.data.create_at" autocomplete="off" disabled/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editDialog = false">Cancel</el-button>
        <el-button type="primary" @click="confirmModifyKnowledge">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>

<style scoped>
#button-add {
  display: inline-block;
  margin-left: 10px;
  margin-bottom: 10px;
}

</style>